export interface canvasBasicType {
  lineCapWidth: number, 
  canvasPadding: number,
  canvasHeight: number,
}
 

export const drawLine = (ctx: CanvasRenderingContext2D, timeLabels: string[], canvasBasicData: canvasBasicType & { canvasWidth: number }) => {
  const { lineCapWidth, canvasPadding, canvasHeight, canvasWidth } = canvasBasicData
  ctx.fillStyle = '#fff'
  ctx.font = '10px serif'
  ctx.textAlign = 'center'

  let index = 0 // 初始化索引
  const batchSize = 50 // 每批渲染的数量
  // 开始分批绘制
  const renderBatch = () => {
      const halfLineCapWidth = lineCapWidth / 2
      const centerY = canvasHeight / 2
      const lastIndex = timeLabels.length - 1
      for (let i = 0; i < batchSize && index < timeLabels.length; i++, index++) {
          const x = canvasPadding + index * lineCapWidth
          ctx.fillText(timeLabels[index], x, centerY)
          if (index !== lastIndex) {
              ctx.fillText('·', x + halfLineCapWidth, centerY)
          } else { // 判断最后一个点是否显示
              const lastDistance = canvasWidth - x - canvasPadding;
              if (lastDistance >= halfLineCapWidth) {
                  ctx.fillText('·', x + halfLineCapWidth, centerY)
              }
          }
      }
  
      if (index < timeLabels.length) {
          requestAnimationFrame(renderBatch); // 如果还有剩余，继续渲染下一批
      }
  }
  // 初始调用
  renderBatch()
}